import React, { Component } from 'react'
import PropTypes from 'prop-types';//用来约束组件外部属性的属性值类型，
export default function NotFound() {

  return (
    <div>对不起，您的路径有误
      <Profile username="sofn">
        {user => user === null ? "加载中..." : "用户信息"}{" "}
      </Profile>

    </div>
  )
}






// import fetchUser from 'utils';
//fetchUser接收用户名，并返回promise
//当得到用户数据的时候返回resolve状态
class Profile extends Component {

  //在这里写下你的代码
  //约束一下外部属性的属性值类型
  static propTypes = {
    //key(属性名):value（属性值的类型）
    username: PropTypes.string
  }
  state = {
    user: null,//用户信息
  }
  //类组件中的生命周期钩子函数，类似vue中的mounted
  componentDidMount() {
    fetchUser(this.props.username)
      .then(res => {
        this.setState({ user: res })
      })
  }
  render() {
    console.log("this.props.children", this.props.children[0])
    return <>{this.props.children[0](this.state.user)}</>
  }


}

function fetchUser(username) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ username: "张三", sex: "男", age: 20 })
    }, 2000);
  })
}



class Test extends React.Component {
  state = {
    count: 0
  }
  add = () => {
    // this.setState({ count: this.state.count + 1 })
    this.setState((state, props) => {
      console.log("state", state);
      console.log("props", props);
      return {
        count: state.count + 1
      }
    })
  }
  render() {
    return <>{this.state.count} <button onClick={this.add}>add</button></>
  }
}
